<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script
      type="text/javascript"
      src="<%= BASE_URL %>lib/include-lib.js"
      libpath="<%= BASE_URL %>lib/"
      include="jquery,haoutil,layer,turf,toast,yjs"
    ></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <div id="snackbar-container"></div>

    <!-- built files will be auto injected -->
  </body>
  <script>
    var _geoserverURL = "http://124.71.165.205:8580";
    var measureHandeler;
    var classificationCollections;
    function compare(){
      $("#centerDiv").css("width", "50%");
      $("#centerDivEx").css("display", "block");
      $("#middleCompare").css("display", "block");
    }

    function timeLine(){
      $("#timeClose").show();
    }
    function toggleClick(parems) {
      // $('.main-wrap-center').hide();
      // console.log(parems);
      showMessage(2000, "请在地块中选择基准点");
      if (measureHandeler) {
        measureHandeler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        );
      } else {
        measureHandeler = new Cesium.ScreenSpaceEventHandler(
          viewer.scene.canvas
        );
      }
      if (classificationCollections != undefined) {
        viewer.scene.primitives.remove(classificationCollections);
      }
      var inputAction = function (movement) {
        var pos = movement.position;
        var scene = viewer.scene;
        var cartesian;
        var pickedObject = scene.pick(pos);
        if (pickedObject) {
          cartesian = scene.pickPosition(pos);
        }
        if (cartesian) {
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
            6
          );
          var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
            6
          );
          var altitude = cartographic.height.toFixed(2);
          result = {
            lon: longitude,
            lat: latitude,
            alt: altitude,
          };
          // console.log(result);
          render(parems, altitude);
          measureHandeler.removeInputAction(
            Cesium.ScreenSpaceEventType.LEFT_CLICK
          );
          // onclick(state, cartesian, result);
        }
      };

      measureHandeler.setInputAction(
        inputAction,
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      );
    }

    function render(params, height) {
   
      classificationCollections = new Cesium.PrimitiveCollection();
      viewer.scene.primitives.add(classificationCollections);
      var _queryinfo =
        _geoserverURL +
        "/geoserver/taicang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=taicang%3Aland&maxFeatures=50&outputFormat=application%2Fjson&FeatureID=" +
        params;
      let _geojson;
      $.ajax({
        url: _queryinfo,
        method: "GET",
        datatype: "json",
        async: false,
        success: function (data) {
          // 单体化建筑信息
          
          let degArray = [];
          let geometries = [];
          let feature = data.features[0];
          if (feature.geometry.type == "Polygon") {
            let coords = feature.geometry.coordinates[0];
            degArray = [];
            for (coord of coords) {
              degArray = degArray.concat(coord);
            }

            geometries.push(newGeometry(degArray,height));
          } else if (feature.geometry.type == "MultiPolygon") {
            for (coordinate of feature.geometry.coordinates) {
              degArray = [];
              for (coord of coordinate[0]) {
                degArray = degArray.concat(coord);
              }
              // console.log("this_height"+height);
              geometries.push(newGeometry(degArray,height));
            }
            // console.log(degArray);
          }

          let jzPrimitive = new Cesium.ClassificationPrimitive({
            geometryInstances: geometries,

            appearance: new Cesium.PerInstanceColorAppearance(),
            classificationType: Cesium.ClassificationType.BOTH,
          });
          classificationCollections.add(jzPrimitive);
        },
      });
    }
    // 构建单体化图形
    function newGeometry(degArray,limitHeight) {
      // console.log(limitHeight*1+0.3);
      var geometryInstance = new Cesium.GeometryInstance({
        geometry: new Cesium.PolygonGeometry({
          polygonHierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray(degArray)
          ),
          height: limitHeight*1+0.3,
          extrudedHeight: 200,
        }),

        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
            Cesium.Color.ORANGE.withAlpha(0.5)
          ),
          show: new Cesium.ShowGeometryInstanceAttribute(true),
        },
        id: "volume",
      });
      return geometryInstance;
    }
    
    function showMessage(time, message) {
    $.snackbar({
        content: message,
        timeout: time,
        style: "toast"
    });
}
  </script>
</html>
